﻿.chat-container {padding: 4% 2%;height: 420px;overflow: auto}
@media (max-width:600px) {.chat-container {height: 320px}}
.messenger-chat { clear:both}
.messenger-chat .us-img img { height: 36px; width: 36px}
@media (max-width:600px) {.messenger-chat .us-img img { height: 30px; width: 30px}}
.bubble {width:auto;max-width: 70%;position: relative;-webkit-border-radius: 14px;-moz-border-radius: 14px;border-radius: 14px;margin-bottom: 10px;margin-left: 8px;padding: 4px 9px;word-wrap: break-word}
@media (max-width:600px) {.bubble {padding: 3px 6px;font-size: 13px}}
.bubble-alt {float: right}
.bubble-alt:before {left: auto;right: -7px}
.bubble-alt:after {left: auto;right: -5px}
.bubble img, .bubble-alt img { height: 70px; width: 70px}
.bt-simple-grey {background:#eaeaea;color:#303030}
.chat-action input[type=text] { border:none;outline: none;padding:5px;width:75%}
.chat-send-btn {background: #009688;color: white;width: 15%;text-align:center;padding: 5px 0;display:inline-block}
a.hvr-radial-out:before {background: rgba(0, 204, 184,0.3)}
.chat-icon-btn {cursor:pointer}
.dropup {width:10%;padding: 5px 0;text-align:center}
.icon-box {border:none}
.icon-box:before {content:'';position: absolute;right: 20px;bottom: -7px;border-left: 5px solid transparent;border-top: 7px solid white;border-right: 5px solid transparent;z-index:999}
.icon-box table tr td { padding: 5px}
.icon-box table tr td:hover { background:#e1e1e1}
.icon-box table tr td img { height: 70px;width:70px;cursor:pointer}
.mute-btn {cursor:pointer}
.notification-btn { cursor:pointer;padding: 0 2px}
.notification-sign {padding: 2px 3px;border-radius: 3px;margin-top:-4px;margin-right:-3px}
.notification-box {width:320px;min-width:250px;margin-top:7.5px;padding:0}
.notification-box:before {content:'';position: absolute;right: 2px;top: -9px;border-left: 6px solid transparent;border-bottom: 10px solid white;border-right: 6px solid transparent;z-index:999}
.notification-box .noti-header {font-weight:bold}
.notification-list {list-style:none;max-height:350px;overflow:auto;margin-bottom:0;padding:0}
.notification-list li {padding:5px;cursor:pointer;border-bottom: 1px solid lightgrey}
.notification-list li:last-child {border-bottom:none}
.notification-list li img {height:50px;width:50px;margin: 0 5px 0 0}
.notification-content {padding-left:5px;font-size: 12px}
.notification-user {font-weight:bold}
.notification-action .mark-as-spam-btn { cursor:default;color: lightgray;display:none}

/*.green {background: #7acd47;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ace44b),color-stop(1, #7acd47));background-image: -webkit-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);background-image: -moz-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);background-image: -ms-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);background-image: -o-linear-gradient(bottom, #ace44b 15%, #7acd47 100%);background-image: linear-gradient(bottom, #ace44b 15%, #7acd47 100%);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#7acd47', endColorstr='#ace44b')}
.green:after {border-bottom-color: #ace44b}
.white {background: #7acd47;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #e5e5e5),color-stop(1, #dbdbdb));background-image: -webkit-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);background-image: -moz-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);background-image: -ms-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);background-image: -o-linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);background-image: linear-gradient(bottom, #e5e5e5 15%, #dbdbdb 100%);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#dbdbdb', endColorstr='#e5e5e5')}
.white:after {border-bottom-color: #e5e5e5}
.yellow {background: #7acd47;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #fcf3c3),color-stop(1, #f4e371));background-image: -webkit-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);background-image: -moz-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);background-image: -ms-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);background-image: -o-linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);background-image: linear-gradient(bottom, #fcf3c3 15%, #f4e371 100%);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f4e371', endColorstr='#fcf3c3')}
.yellow:after {border-bottom-color: #fcf3c3}
.red {background: #7acd47;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ea8378),color-stop(1, #e2675a));background-image: -webkit-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);background-image: -moz-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);background-image: -ms-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);background-image: -o-linear-gradient(bottom, #ea8378 15%, #e2675a 100%);background-image: linear-gradient(bottom, #ea8378 15%, #e2675a 100%);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e2675a', endColorstr='#ea8378')}
.red:after {border-bottom-color: #ea8378}
.pink {background: #7acd47;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.15, #ffbee3),color-stop(1, #f8a5ce));background-image: -webkit-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);background-image: -moz-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);background-image: -ms-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);background-image: -o-linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);background-image: linear-gradient(bottom, #ffbee3 15%, #f8a5ce 100%);filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f8a5ce', endColorstr='#ffbee3')}
.pink:after {border-bottom-color: #ffbee3}*/
